//高度100%
.vh-100 {
  height: 100vh;
}
.h-100 {
  height: 100%;
}
.vw-100 {
  width: 100vw;
}
.w-100 {
  width: 100%;
}

// width 10~500 px
each(range(500),{
     .w@{value}{
        width: (@value*1px) !important;
    }
})

// width 10~100 px
each(range(100),{
  .h@{value}{
     height: (@value*1px) !important;
 }
})


// 字体颜色
.f-grey {
  color: @color-grey;
}

.f-white {
  color: #ffffff;
}

.f-red {
  color: @color-red;
}

.f-black {
  color: @color-black;
}

// display
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}
.inline {
  display: inline;
}

// border
.border-none {
  border: none !important;
}
.border-radius-0 {
  border-radius: 0 !important;
}

.radius {
  border-radius: 50% !important;
}

// position
.relative {
  position: relative !important;
}
.absolute {
  position: absolute !important;
}

.abs-left-top {
  position: absolute;
  left: 0;
  top: 0;
}
.abs-left-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
}
.abs-right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
}
.abs-right-top {
  position: absolute;
  right: 0;
  top: 0;
}

.fixed {
  position: fixed !important;
}

.static {
  position: static;
}

.auto-center {
  margin: 0 auto;
  display: block;
}

// text
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-through {
  text-decoration: line-through !important; // 删除线
}

// 下划线
.text-divider {
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  position: relative;
  transform: scaleY(0.6);
  &::after {
    content: '|';
    opacity: 0.4;
  }
}

.nowarp {
  white-space: nowrap !important;
}
.warp {
  white-space: warp !important;
}

// css滚动
.scroll-y {
  /* 使之可以滚动 */
  overflow-x: hidden;
  overflow-y: auto !important;
  /* 滚动弹性弹性、并且让整个body不会随滚动内容一起乱跑 */
  -webkit-overflow-scrolling: touch;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
// 开启横向滚动
.scroll-x {
  overflow-y: hidden;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

// overflow
.overflow-hide {
  overflow: hidden !important;
}

// 中间部分的内容容器
.main-cont {
  overflow: auto;
  overflow-x: hidden;
}

// flex布局
.flex,
.flex-column {
  display: flex;

  &.inline {
    display: inline-flex;
  }

  //折行
  &.flex-nowrap {
    flex-wrap: nowrap;
  }
  &.flex-wrap {
    flex-wrap: wrap;
  }
  &.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  //横向对齐方式
  &.row-left {
    justify-content: flex-start;
  }
  &.row-right {
    justify-content: flex-end;
  }
  &.row-center {
    justify-content: center;
  }
  &.row-between {
    justify-content: space-between;
  }
  &.row-around {
    justify-content: space-around;
  }
  //纵向对齐方式
  &.col-top {
    align-items: flex-start;
  }
  &.col-bottom {
    align-items: flex-end;
  }
  &.col-center {
    align-items: center;
  }
  &.col-baseline {
    align-items: baseline;
  }
  &.col-stretch {
    align-items: stretch;
  }

  // 纵向flex
  &.flex-column {
    flex-direction: column;
    //横向对齐方式
    &.row-center {
      align-items: center;
    }
    &.row-left {
      align-items: flex-start;
    }
    &.row-right {
      align-items: flex-end;
    }
    &.row-between {
      align-items: stretch;
    }
    &.col-center {
      justify-content: center;
    }
    &.col-top {
      justify-content: flex-start;
    }
    &.col-bottom {
      justify-content: flex-end;
    }
  }
}

// flex居中
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// absolute 居中
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
// fontsize
each(range(10,20),{
    .f@{value} {
        font-size:(@value*1px);
    }
})

// line-height
each(range(1,50),{
  .lh@{value} {
    line-height:(@value*1px);
  }
})

// flex 占比
each(range(10),{
    .flex-@{value} {
        flex:(@value);
    }
})

// border-radius 1~20 px
each(range(20), {
   .r@{value} {
      border-radius: (@value*1px)  !important;
    }
});

// for循环1-5行限制
each(range(5), {
   .ellipsis-@{value} {
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: (@value);
    overflow: hidden;
    line-height: normal;
    }
});
// padding
each(range(20), {
   .p@{value} {
        padding: (@value*1px) !important;
    }
});
// margin/padding-[direction] 0~100 px

each(range(100), {
    .mt@{value} {
        margin-top: (@value*1px) !important;
    }
    .mr@{value} {
        margin-right: (@value*1px)  !important;
    }
    .mb@{value} {
        margin-bottom: (@value*1px)  !important;
    }
    .ml@{value} {
        margin-left: (@value*1px)  !important;
    }
    .pt@{value} {
        padding-top: (@value*1px)  !important;
    }
    .pr@{value} {
        padding-right: (@value*1px)  !important;
    }
    .pb@{value} {
        padding-bottom: (@value*1px)  !important;
    }
    .pl@{value} {
        padding-left: (@value*1px)  !important;
    }
});
